//
//  BudgetManagerHeaderView.swift
//  KoiAccounting
//
//  Created by 纪洪文 on 16.04.25.
//

import SwiftUI

struct BudgetManagerHeaderView: View {
    
    @Binding var budgetTotalAmount: Double
    @Binding var expenseAmount: Double
    @Binding var surplusAmount: Double
    var onSetBudgetClick:()->Void
    
    var body: some View {
        VStack (spacing: 0){
            
            HStack {
                VStack (alignment:.leading){
                    Text("剩余预算")
                        .font(.system(size: 14))
                        .fontWeight(.medium)
                        .foregroundColor(Color.koiColorTitleSecond)
                    Text(surplusAmount.toStringWithoutTrailingZeros())
                        .font(.system(size: 34))
                        .fontWeight(.medium)
                        .foregroundColor(Color.koiColorTitle)
                }
                
                Spacer()
                
                ProgressView(value: usePercent())
                    .progressViewStyle(CircularProgressViewStyle(tint: Color.koiColorPrimary))
                    .frame(width: 62, height: 62)
                    .padding(6)
                
            }
            HStack {
                HStack {
                    Text("已支出：\(expenseAmount.toStringWithoutTrailingZeros())")
                        .font(.system(size: 13))
                        .foregroundColor(Color.koiColorTitleSecond)

                    Spacer()
                }
                .frame(maxWidth: .infinity)
                
                HStack (spacing: 0) {
                    Spacer()
                    Button(action:onSetBudgetClick) {
                        Text("月总预算：\(budgetTotalAmount.toStringWithoutTrailingZeros())")
                            .font(.system(size: 13))
                            .foregroundColor(Color.koiColorTitleSecond)
                        Image("koi_ic_pencil")
                            .renderingMode(.template)
                            .resizable()
                            .frame(width: 13, height: 13)
                            .foregroundColor(Color.koiColorTitleSecond)
                            .padding(.leading, 2)
                    }
                }
                .frame(maxWidth: .infinity)
            }
            .padding(.top, 14)
        }
        .padding(16)
        .background(Color.koiColorBackgroundItem)
        .cornerRadius(16)
    }
    
    private func usePercent() -> Double {
        if budgetTotalAmount == 0 {
            return 0
        }
        return (expenseAmount / budgetTotalAmount)
    }
}

struct CircularProgressViewStyle: ProgressViewStyle {
    var backgroundColor: Color = Color.koiColorDivider
    var tint: Color = .red
    var strokeWidth: CGFloat = 8.0

    func makeBody(configuration: Configuration) -> some View {
        ZStack {
            // 背景圆环
            Circle()
                .stroke(backgroundColor, lineWidth: strokeWidth)

            // 进度圆环
            Circle()
                .trim(from: 0.0, to: CGFloat(configuration.fractionCompleted ?? 0))
                .stroke(tint, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
                .rotationEffect(.degrees(-90))

            // 百分比文字
            if let fractionCompleted = configuration.fractionCompleted {
                VStack {
                    Text("已用")
                        .font(.system(size: 10))
                        .foregroundColor(Color.koiColorTitleSecond)
                    Text(fractionCompleted.toPercent())
                        .font(.system(size: 15))
                        .fontWeight(.medium)
                        .foregroundColor(Color.koiColorTitle)
                }
                
            }
        }
    }
}

@available(iOS 18, *)
#Preview {
    @Previewable @State var budgetTotalAmount: Double = 3000
    @Previewable @State var expenseAmount: Double = 1000
    @Previewable @State var surplusAmount: Double = 2000
    BudgetManagerHeaderView(
        budgetTotalAmount: $budgetTotalAmount,
        expenseAmount: $expenseAmount,
        surplusAmount: $surplusAmount,
        onSetBudgetClick: {}
    )
}
